/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

(function ($) {
    $.fn.paste = function () {
        this.each(enablePasting);
    };
    
    // enable pasting
    function enablePasting(index, $this) {
        if (!$this.enablePasting) {
            $this.enablePasting = true;       
            $this.addEventListener("paste", pasteHandler);
        }
    }
    
    function pasteHandler(event) {
        if (event.clipboardData) {
            var items = event.clipboardData.items;
            if (items) {
                for (var i = 0; i < items.length; i++) {
                    if (items[i].type.indexOf("image") !== -1) {
                        
                        var blob = items[i].getAsFile();
                        
                        var image = insertImage("Images/Uploading.gif");
                        uploadImage(blob, image);
                    }
                }
            }
        }                
    }
    
    function insertImage(url) {
        var selection, range;
        if (window.getSelection) {
            selection = window.getSelection();
            if (selection.getRangeAt && selection.rangeCount) {
                range = selection.getRangeAt(0);
                range.deleteContents();

                // Range.createContextualFragment() would be useful here but is
                // only relatively recently standardized and is not supported in
                // some browsers (IE9, for one)
                var element = document.createElement("div");
                element.innerHTML = "<img class='uploading' src='" + url + "' />"; //"/Images/Loading.gif";
                
                var fragment = document.createDocumentFragment(), node, lastNode;
                while ( (node = element.firstChild) ) {
                    lastNode = fragment.appendChild(node);
                }
                
                range.insertNode(fragment);

                // Preserve the selection
                if (lastNode) {
                    range = range.cloneRange();
                    range.setStartAfter(lastNode);
                    range.collapse(true);
                    selection.removeAllRanges();
                    selection.addRange(range);
                }
                
                return lastNode;
            }
        } 
        
        return null;
    }
    
    
    function uploadImage(imageBlob, imageElement) {
        $(imageElement).removeClass("uploading");
        var request = new XMLHttpRequest();
        var formData = new FormData();
        formData.append("file", imageBlob);
        
        request.image = imageElement;
        request.open("POST", "?service=Trainer&action=uploadImage&json=true", true);
        request.onreadystatechange = uploadStateChange;
        
        request.send(formData);
    }
    
    function uploadStateChange() {
        if (this.readyState === 4 && this.status === 200) {
            var data = JSON.parse(this.responseText); // handle response.
            data = data.data;
            if (!data.error) {
                this.image.src = data.url;
                $(this.image).removeClass("uploading");
            }
        };
    }
    
})(jQuery);